I have directory structure as below
apps
|--GruntFile.js
|--package.json
|--js
|--js.txt
|--global
|--backbone.js
|--jquery.js
|--lodash.js
|--base.js
|--css
|--a.css
|--b.css
|--c.css
And have gruntFile.js as below:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jsFiles: grunt.file.read('apps/js.txt'),
concat: {
options: {
separator: ';'
},
dist: {
src: [ '<%= jsFiles %>' ],
dest: 'build/js/main_base.js'
}
},
});
grunt.registerTask('default', ['concat']);
};
My js.txt file contains js files list, which needed to be processed in sequence.
js.txt:
'assets/js/global/lodash.js',
'assets/js/global/underscore.js',
'assets/js/global/backbone.js',
'assets/js/base.js
And my package.json is below:
{
"name": "abc",
"version": "1.0.0",
"author": "Allen",
"private": true,
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.0",
"grunt-contrib-handlebars": "^1.0.0",
"grunt-contrib-less": "^1.2.0",
"grunt-contrib-uglify": "^1.0.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-cssc": "^0.2.6",
"grunt-htmlhint": "^0.9.12-fix",
"matchdep": "^1.0.1"
},
}
Now when i am compiling the files using grunt file, it is getting compile successfully, but the main_base.js in build folder is of size 0.
Actually my concept goes like this, whatever the js files i am adding in my repo, i am maintaining it sequentially in js.txt , rather than maintaining them in GruntFile.js in concat task. Similar thing i want to do will all my less files.
But it is not getting process. Any idea, where i am missing? Thanks.
According to your structure I guess:
grunt.file.read('apps/js.txt'),
should be:
grunt.file.read('js/js.txt'),
and instead of:
[ '<%= jsFiles %>' ],
you should probably have:
<%= jsFiles.toString().split("\n") %>,
to create an array out of the files (convert buffer to string, convert to array based on linebreaks)
maybe you could include the jsFiles array in your grunt file, or have it as an json file to simplify parsing.
I would suggest that you check out webpack, this is what I currently use to build my apps these days, and require the modules you need directly from your javascript source files.
Related
This is my first time setting up webpack, and so far I'm just confused. I'm trying to gather all of my jsx files in their respective files, but webpack seems to think they don't exist...
webpack --display-error-details
I get this errors that look like so:
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./static/js/base in /Users/Maude/Projects/School/entry
resolve file
/Users/Maude/Projects/School/entry/static/js/base.js doesn't exist
/Users/Maude/Projects/School/entry/static/js/base.jsx doesn't exist
/Users/Maude/Projects/School/entry/static/js/base is not a file
resolve directory
/Users/Maude/Projects/School/entry/static/js/base/package.json doesn't exist (directory description file)
directory default file index
resolve file index in /Users/Maude/Projects/School/entry/static/js/base
/Users/Maude/Projects/School/entry/static/js/base/index doesn't exist
/Users/Maude/Projects/School/entry/static/js/base/index.jsx doesn't exist
/Users/Maude/Projects/School/entry/static/js/base/index.js doesn't exist
My static file structure looks like this:
static
|- js
|- base
|- base.jsx
|- classes
|- classes.jsx
|- locations.jsx
|- students
|- students.jsx
|- network.jsx
|- teachers
|- teachers.jsx
|- less
And lastly my webpack.config.js file:
module.exports = {
entry: {
base: './static/js/base',
classes: './static/js/classes',
students: './static/js/students',
teachers: './static/js/teachers',
},
output: {
path: './static/bundles',
filename: '[name].js'
},
devServer: {
inline: true,
port: 3333
},
module: {
loaders: [
{
test: /\.js$/,
exclude: '/node_modules/',
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
},
resolve: {
modulesDirectories: ['/node_modules/'],
extensions: ['', '.js', '.jsx'],
},
}
Why am I receiving errors like ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' when they're clearly there? Help obi-wan!
Also my package.json:
{
"name": "--",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"bower": "^1.7.9",
"gulp": "^3.9.1",
"gulp-bower": "0.0.13",
"gulp-changed": "^1.3.1",
"gulp-concat": "^2.6.0",
"gulp-cssmin": "^0.1.7",
"gulp-html-replace": "^1.6.1",
"gulp-less": "^3.1.0",
"gulp-load-plugins": "^1.2.4",
"gulp-plumber": "^1.1.0",
"gulp-react": "^3.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-shell": "^0.5.2",
"gulp-uglify": "^1.5.4",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
i think you only need the one entry file, base.jsx, unless you have an extra index file in your structure.
webpack will crawl through the imports and build up the tree structure from that
entry: './static/js/base.jsx'
edit: for a single entry point you want the file that has something like:
React.render(<App />, document.getElementById('app')
from your packaged.json, it looks like it might be index.js, if so then you put in webpack.config.js
entry: './index.js'
then webpack should pull in the entire react app by following the import statements to build the complete bundle file.
btw. there is no real need to use .jsx file extensions. Just use .js. It means you also don't need to worry about the extensions field in webpack
btw2. why are you mixing gulp and webpack? Never seen that before. Maybe better to go either the gulp/browserify route, or just stick to webpack.
I recently started using grunt and can't seem to get it working: I installed grunt-cli using npm and also installed a few grunt modules using npm with no issues. I'm trying to compile all the bootstrap framework's less files into one css file but keep getting an error saying the less task was not found. i'm sure everything is where it's supposed to be and I loaded the grunt-contrib-less plugin in the gruntfile. Any idea where I might be going wrong?
My package.json's contents:
{
"name": "dConference",
"version": "0.1.0",
"devDependencies": {
"grunt": "latest",
"grunt-contrib-jshint": "latest",
"jshint-stylish": "latest",
"grunt-contrib-uglify": "latest",
"grunt-contrib-less": "latest",
"grunt-contrib-cssmin": "latest",
"grunt-contrib-watch": "latest"
}
}
And my gruntfile.js's contents:
//gruntfile specifying all tasks to be performed
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//all configuration goes here
less: {
build: {
files: [{
expand: true,
cwd: "components/less",
src: ["*.less"]
dest: "css/main.css"
} ]
}
}
});
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-watch");
};
I made Gruntfile.js as following.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
build: {
files: {
'css/main.css': 'components/less/bootstrap.less'
}
}
}
});
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-watch");
};
And running "grunt less" on project root folder was successful.
After successful running of "grunt less" command, main.css was generated under css folder.
Project structure is:
grunt-test-project
components/less
mixins folder
all other bootstrap less files
css
Gruntfile.js
package.json
Please try it on your side and let me know the result.
I'd like to use Browserify but continue loading jQuery and jQuery UI from Google's CDN instead of concatenating the code into my files or my vendor bundle. I can't seem to figure out how to get it to work.
I am getting this error when loading foo.js:
Cannot find module 'jquery-ui'
These are the relevant files:
package.json
{
// ...
"devDependencies": {
"browserify-shim": "^3.8.11",
"deamdify": "^0.1.1",
"grunt": "^0.4.5",
"grunt-browserify": "^4.0.1"
},
"dependencies": {
"jquery": "^2.1.4",
"jquery-ui": "^1.10.5"
},
"browserify-shim": {
"jquery": "global:$",
"jquery-ui": {
"depends": "jquery",
"exports": null
}
}
}
Gruntfile.js
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
options: {
external: [
'jquery',
'jquery-ui'
],
transform: [
'browserify-shim',
'deamdify'
]
},
app: {
files: [{
expand: true,
cwd: 'public/js',
src: '*.js',
dest: 'assets/js'
}]
}
}
});
grunt.loadNpmTasks('grunt-browserify');
};
foo.js
'use strict';
var $ = require('jquery');
require('jquery-ui');
$(document).ready(function () {
console.log('Hello world');
$('button').button();
});
I have also tried exclude instead of external and it produces the same results. Any way to achieve this?
I realize there's also the debowerify transform but I'd like to avoid Bower if possible.
Update: I've noticed that commenting out the require call to 'jquery-ui' will work because jQuery exposes the global $ and jQuery by default but I thought the whole point of writing code in CommonJS or even AMD format is to avoid depending on globals?
You do not need the external block here. That's for excluding various libraries for your bundle...which is why when using the require('jquery-ui') with the external block you're getting that error.
What you want is to expose the global jquery-ui to your browserify builds, as here in the docs.
The browserify-shim config would be:
"browserify-shim": {
"jquery": "global:$", // this is only if you're also loading jQuery via CDN/<script> tag
"jquery-ui": {
"depends": "jquery"
}
}
Trying to get Grunt to concat my CSS files into one called production.css
Here is the output from the command prompt
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>grunt
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test\Gruntfile.js:2
"name": "AjaxPmodule.exports = function(grunt) {
^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token :
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>grunt
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test\Gruntfile.js:2
"name": "AjaxPmodule.exports = function(grunt) {
^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token :
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>
Here is my Gruntfile
{
"name": "AjaxPmodule.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'css/*.css', // All JS in the libs folder
],
dest: 'css/production.css',
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat']);
};roject",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.5.0"
}
}
I'm using the grunt-contrib-concat to concat my files. The version is "^0.5.0"
You have for some reason gotten some extra text into your file. It should start with module.exports and you also have something extra in the end.
I think what you did was basically to paste your grunt code into a code snippet that looks like package.json:
{
"name": "ajaxProject",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.5.0"
}
}
Try this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'css/*.css', // All JS in the libs folder
],
dest: 'css/production.css',
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat']);
}
I have a website that I inherited with a couple of gigantic css files that analysing with DUst-Me Selector in Firefox return me with almost 2000 unused styles.
To remove them I'm trying to use grunt uncss, the problem is that I get the following error:
grunt uncss
Running "uncss:dist" (uncss) task
Fatal error: uncss/node_modules/css: missing '}' near line 2429:5
-> .mobile-hidden {
Those are my configuration files
package.json
{
"name": "tappr-registration",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "^0.6.0",
"grunt-processhtml": "^0.3.3",
"grunt-uncss": "^0.3.7"
}
}
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uncss: {
dist: {
options: {
media: ['min-width'],
timeout: 1000,
htmlroot: 'public_html',
report: 'max'
},
files: {
'dist/clean.css': ['public_html/index.php', 'public_html/page_2.html', 'public_html/page_3.html']
}
}
}
});
// Load the plugin that provides the "uncss" task.
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-processhtml');
grunt.registerTask('default', ['uncss','processhtml']);
};
Now, my best guess is that I get this error because I specifying in the wrong way the media queries to include but I haven't found some decent documentation on how uncss wants that option.
I already tried to take off the options.
Do somebody has some good suggestion?
Believe it or not the problem was caused by the comments:
<!-- ----- Responsive 34.2857142857em ------>
After that I remove them everything worked fine and I can say the it was very much needed.
Running "uncss:dist" (uncss) task
File cleancss/tidy.css created: 229.48 kB → 25.98 kB
:)